1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
import { Metadata } from "next"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"
import { SidebarNav } from "@/components/layout/sidebar-nav"
import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Clock, AlertTriangle, CheckCircle, XCircle, AlertCircle, Calendar, CalendarDays } from "lucide-react"
import { RfqsLastView } from "@/db/schema"
import { findRfqLastById } from "@/lib/rfq-last/service"
import { differenceInDays } from "date-fns"
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
import { DueDateEditButton } from "@/lib/rfq-last/due-date-edit-button"
export const metadata: Metadata = {
title: "견적 목록 상세",
}
export default async function RfqLayout({
children,
params,
}: {
children: React.ReactNode
params: { lng: string, id: string }
}) {
// 1) URL 파라미터에서 id 추출, Number로 변환
const resolvedParams = await params
const lng = resolvedParams.lng
const rfqId = parseInt(resolvedParams.id, 10);
if (!rfqId || isNaN(rfqId) || rfqId <= 0) {
return (
<div className="p-4">
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>오류</AlertTitle>
<AlertDescription>
유효하지 않은 RFQ입니다.
</AlertDescription>
</Alert>
</div>
);
}
// 2) DB에서 해당 협력업체 정보 조회
const rfq: RfqsLastView | null = await findRfqLastById(rfqId)
// 3) 사이드바 메뉴
const sidebarNavItems = [
{
title: "견적 문서관리",
href: `/${lng}/evcp/rfq-last/${rfqId}`,
},
{
title: "RFQ 발송",
href: `/${lng}/evcp/rfq-last/${rfqId}/vendor`,
},
]
// Due Date 상태 계산 함수
const getDueDateStatus = (dueDate: Date | string | null) => {
if (!dueDate) return null;
const now = new Date();
const due = new Date(dueDate);
const daysLeft = differenceInDays(due, now);
if (daysLeft < 0) {
return {
icon: <XCircle className="h-4 w-4" />,
text: `${Math.abs(daysLeft)}일 지남`,
className: "text-red-600",
bgClassName: "bg-red-50"
};
} else if (daysLeft === 0) {
return {
icon: <AlertTriangle className="h-4 w-4" />,
text: "오늘 마감",
className: "text-orange-600",
bgClassName: "bg-orange-50"
};
} else if (daysLeft <= 3) {
return {
icon: <AlertCircle className="h-4 w-4" />,
text: `${daysLeft}일 남음`,
className: "text-amber-600",
bgClassName: "bg-amber-50"
};
} else if (daysLeft <= 7) {
return {
icon: <Clock className="h-4 w-4" />,
text: `${daysLeft}일 남음`,
className: "text-blue-600",
bgClassName: "bg-blue-50"
};
} else {
return {
icon: <CheckCircle className="h-4 w-4" />,
text: `${daysLeft}일 남음`,
className: "text-green-600",
bgClassName: "bg-green-50"
};
}
};
const dueDateStatus = rfq?.dueDate ? getDueDateStatus(rfq.dueDate) : null;
const getRfqCategory = (rfqCode: string | null | undefined): string => {
if (!rfqCode || rfqCode.length === 0) return 'itb'; // 기본값
const firstChar = rfqCode[0].toUpperCase();
switch (firstChar) {
case 'I':
return 'itb';
case 'R':
return 'rfq';
case 'F':
return 'general';
default:
return 'itb'; // 기본값
}
};
return (
<>
<div className="container py-6">
<section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
<div className="hidden space-y-6 p-10 pb-16 md:block">
<div className="space-y-0.5">
{/* 제목과 버튼을 같은 라인에 배치 */}
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold tracking-tight">
{rfq
? rfq.rfqTitle
? `견적 상세 관리 ${rfq.rfqCode ?? ""} | ${rfq.rfqTitle}`
: `견적 상세 관리 ${rfq.rfqCode ?? ""}`
: "Loading RFQ..."}
</h2>
<Link href={`/${lng}/evcp/rfq-last?rfqCategory=${getRfqCategory(rfq?.rfqCode)}`} passHref>
<Button variant="ghost" className="flex items-center text-primary hover:text-primary/80 transition-colors">
<ArrowLeft className="mr-1 h-4 w-4" />
<span>견적 목록으로 돌아가기</span>
</Button>
</Link>
</div>
{/* 생성일과 마감일 표시 */}
{rfq && (
<div className="flex items-center gap-6 pt-3">
{/* 생성일 */}
<div className="flex items-center gap-2">
<Calendar className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium text-muted-foreground">생성일:</span>
<strong className="text-sm">{formatDate(rfq.createdAt, "KR")}</strong>
</div>
{/* 구분선 */}
<div className="h-4 w-px bg-border" />
{/* 마감일 */}
<div className="flex items-center gap-2">
<CalendarDays className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium text-muted-foreground">마감일:</span>
{rfq.dueDate ? (
<>
<strong className="text-sm">{formatDate(rfq.dueDate, "KR")}</strong>
{dueDateStatus && (
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${dueDateStatus.bgClassName} ${dueDateStatus.className}`}>
{dueDateStatus.icon}
<span className="text-xs font-medium">{dueDateStatus.text}</span>
</div>
)}
<DueDateEditButton
rfqId={rfqId}
currentDueDate={rfq.dueDate}
rfqCode={rfq.rfqCode || ''}
rfqTitle={rfq.rfqTitle || ''}
/>
</>
) : (
<>
<span className="text-sm text-muted-foreground">미설정</span>
<DueDateEditButton
rfqId={rfqId}
currentDueDate={null}
rfqCode={rfq.rfqCode || ''}
rfqTitle={rfq.rfqTitle || ''}
/>
</>
)}
</div>
</div>
)}
</div>
<Separator className="my-6" />
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
<aside className="lg:w-64 flex-shrink-0">
<SidebarNav items={sidebarNavItems} />
</aside>
<div className="lg:w-[calc(100%-16rem)] overflow-auto">{children}</div>
</div>
</div>
</section>
</div>
</>
)
}
|
